<template>
  <div class="common-layout">
    <el-container>
        <div class="q">
    <el-col :span="12">
      <el-menu default-active="2" class="el-menu-vertical-demo" :unique-opened="true" @open="handleOpen" @close="handleClose">
      <img src="./assets/logooo.png" alt="">
      <div class="bbb"></div>
      <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <el-icon><Odometer /></el-icon>
          <span><router-link to="/oneVue">仪表盘</router-link></span>
        </el-menu-item>
        <el-sub-menu index="first">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Menu /></el-icon>常用设置
          </template>
            <el-menu-item index="first-1">&nbsp;&nbsp;<router-link to="/twovue">教师管理</router-link></el-menu-item>
            <el-menu-item index="first-2">&nbsp;&nbsp;<router-link to="/threevue">学生管理</router-link></el-menu-item>
            <el-menu-item index="first-3">&nbsp;&nbsp;<router-link to="/fourvue">公告管理</router-link></el-menu-item>
            <el-menu-item index="first-4">&nbsp;&nbsp;<router-link to="/fivevue">系统配置</router-link></el-menu-item>
            <el-menu-item index="first-5">&nbsp;&nbsp;<router-link to="/sixvue">判题服务器</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="second">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Aim /></el-icon>问题
          </template>
            <el-menu-item index="second-1">&nbsp;&nbsp;<router-link to="/sevenvue">问题列表</router-link></el-menu-item>
            <el-menu-item index="second-2">&nbsp;&nbsp;<router-link to="/eightvue">增加题目</router-link></el-menu-item>
            <el-menu-item index="second-3">&nbsp;&nbsp;<router-link to="/ninevue">导入导出题目</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="third">
          <template #title>
            <el-icon><location /></el-icon>
            <el-icon><Trophy /></el-icon>比赛&练习
          </template>
            <el-menu-item index="third-1">&nbsp;&nbsp;<router-link to="/tenvue">比赛列表</router-link></el-menu-item>
            <el-menu-item index="third-2">&nbsp;&nbsp;<router-link to="/elevenvue">创建比赛</router-link></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="fourth">
          <template #title><el-icon><location /></el-icon><el-icon><Collection /></el-icon>课程
            <aside></aside>
          </template>
            <el-menu-item index="fourth-1">&nbsp;&nbsp;<router-link to="/thirteen">课程列表</router-link></el-menu-item>
            <el-menu-item index="fourth-2">&nbsp;&nbsp;<router-link to="/twelvevue">创建课程</router-link></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col></div>
      <el-container style="background-color: #EDECEC;width:100%;">
          <div class="aaa">
         <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
            <el-icon><Search /></el-icon>
            <el-icon><Share /></el-icon>
          <span>Username</span>
          <el-dropdown>&nbsp;<el-icon><ArrowDown /></el-icon> 
            <template #dropdown>
              <el-dropdown-menu><el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        </el-header>
        </div>
        <el-main>
          <div class="c">
          <router-view></router-view>
          <div class="sbpht">
          </div>
          </div>
          <!-- <div class="el-main-wenzi">
          <v-text>这里是主题内容，可以使用组件，也可以写html</v-text>
          </div> -->
        </el-main>
        <el-footer>
        
         </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {Menu,ArrowDown,Odometer,Aim,Trophy,Collection,Search,Share} from '@element-plus/icons-vue'
export default{
    data(){
        return{}
    },
    components:{Menu,ArrowDown,Odometer,Aim,Trophy,Collection,Search,Share}
}
</script>
<style scoped>
.el-menu-vertical-demo{width: 200px;}
.q{width: 200px;}
.aaa{height: 100px;background-color: rgb(238, 238, 238)}
img{margin-top: -30px;}
.toolbar{height: 30px;padding: 5px;}
.bbb{width: 400px;height: 80px;}
.c{background-color: rgb(255, 255, 255);}
.router-link-active {text-decoration: none;color: black;}
a{text-decoration: none;color: black;}
.sbpht{height: 1px;width: 100%;background-color: black;margin-bottom: 80px;}
</style>